// 订单项
<template>
	<!-- 定义了一个列表项，@tap事件监听器在容器被点击时触发handleClick -->
	<view class="order-item" @tap.stop="handleClick" hover-class="hover">
		<view class="order-item-header">
			<text class="time">{{ order.createTime | dateformat }}</text>
			<!-- <view class="status" :class="order.status"> -->
			<text class="type"> {{ getOrderStatusText(order.status) }}</text>
			<!-- </view> -->
		</view>
		<view class="products">
			<!-- <SkuItem class="sku" :info="item" :disableClick="true" v-for="(item, index) in order.skus" :key="index">
			</SkuItem> -->
		</view>
		<!-- 使用@tap.stop事件来阻止事件的默认行为 -->
		<view>
			<view class="total-price" >
				<view class="store-total" v-for="(item, index) in order.skus" :key="index">
					<image class="thumb" :src="item.skuPic" mode="aspectFill"></image>
					<view class="right">
						<view class="remark">
							<!-- 使用v-if指令来判断订单是否存在备注信息，如果存在则显示备注信息 -->
							<text v-if="order.remark">{{ order.remark }}</text>
						</view>
						<text class="productName">{{ item.productName }}</text>
						<view class="price-product">
							<view class="price-number">
								<text class="price-key">单价：</text>
								<view class="price">
									{{ item.skuScore }}
									<!-- <PriceDisplay :disableClick="true" :info="order" prefix="pay_"></PriceDisplay> -->
								</view>
							</view>
							<view class="price-number1">
								<!-- <text class="price-key">总数：</text> -->
								<!-- <view class="price"> -->
								X{{ item.total }}
								<!-- </view> -->
							</view>
						</view>

					</view>
				</view>
				<view class="price-number">
					<text class="price-key">实付金额：</text>
					<view class="price">
						{{ order.payScorePrice }}
					</view>
				</view>
				<view class="price-number">
					<text class="price-key">订单编号：</text>
					<view class="price" style="font-size:28rpx">
						{{ order.orderNumber }}
					</view>
				</view>
				<view class="price-number" v-if="order.expressNumber">
					<text class="price-key">快递单号：</text>
					<view class="price">
						{{ order.expressNumber }}
					</view>
				</view>
			</view>
		</view>

		<view class="close-time orange" v-if="closeTimeVisible">
			{{ hours }}:{{ minutes }}:{{ seconds }} 后关闭订单
		</view>

		<view class="bottom-actions" @tap.stop>
			<view class="check-box" @tap="handleCheck" v-if="isSelectMode">
				<icon :type="isSelected ? 'success' : 'circle'" size="20" color="#F27233"></icon>
				<text>选择</text>
			</view>

			<view style="flex-grow: 1;"></view>

			<template v-if="order.status == 0">
				<button class="bg-orange" hover-class="hover" data-type="立即支付" @tap="handleClick2">立即支付</button>
				<button class="bg-cancel" hover-class="hover" data-type="取消订单" @tap="handleClick2">取消订单</button>
			</template>
			<!-- <template v-if="order.status == 3">
				<button class="bg-cancel" hover-class="hover" v-if="orderConfig.is_offline_use" data-type="核销码"
					@tap="handleClick2">核销码</button>
				<button class="bg-orange" hover-class="hover" v-if="order.is_chip_cover" data-type="兑换碎片"
					@tap="handleCoverChip">兑换碎片</button>
				<button class="bg-cancel" hover-class="hover" v-if="!orderConfig.is_ban_return_sale" data-type="返售"
					@tap="handleClick2">返售</button>
			</template> -->
			<template v-if="order.status == 1">
				<!-- <button class="bg-white border" hover-class="hover" data-type="提醒发货" @tap="handleClick2">提醒发货</button> -->
				<!-- <button class="bg-cancel" hover-class="hover" v-if="order.is_closeable" data-type="取消订单"
					@tap="handleClick2">取消订单</button> -->
				<!-- <button class="bg-cancel" hover-class="hover" data-type="取消订单" @tap="handleClick2">取消订单</button> -->
				<button class="bg-cancel" hover-class="hover" open-type="contact" v-if="isMiniappAndUseMiniappKf"
					@click="UseMiniappKf()">联系客服</button>
				<button class="bg-cancel" hover-class="hover" @tap="openContact" v-else>联系客服</button>
			</template>
			<template v-if="order.status == 2">
				<button class="bg-orange" hover-class="hover" data-type="确认收货" @tap="handleClick2">确认收货</button>
			</template>
			<template v-if="order.status == 'comment_pending'">
				<!-- <button class="bg-white border" hover-class="hover" data-type="去评价" @tap="handleClick2">去评价</button> -->
			</template>
			<template v-if="order.status == 'closed'">
				<button class="bg-cancel" hover-class="hover" data-type="删除订单" @tap="handleClick2">删除订单</button>
			</template>
			<template v-if="order.status == 'close_pending'">
				<button class="bg-cancel" hover-class="hover" open-type="contact"
					v-if="isMiniappAndUseMiniappKf">联系客服</button>
				<button class="bg-cancel" hover-class="hover" @tap="openContact" v-else>联系客服</button>
			</template>
		</view>
	</view>
</template>

<script>
	import moment from "@/utils/moment.js";
	import mixin from "../../../utils/mixin.js";
	export default {
		mixins: [mixin],
		props: {
			order: {
				type: Object
			},
			isSelected: {
				type: Boolean
			},
			isSelectMode: {
				type: Boolean
			}
		},
		data() {
			return {
				hours: '',
				minutes: '',
				seconds: '',
				closeTimeVisible: false,
				timer: null
			}
		},
		computed: {
			orderConfig() {
				return this.$store.getters.setting.order
			},
			// 计算属性，根据订单状态返回相应的状态文本
			getOrderStatusText() {
				return function(status) {
					switch (status) {
						case 0:
							return '待付款';
						case 1:
							return '待发货';
						case 2:
							return '待收货';
						case 3:
							return '已完成';
						case 4:
							return '已关闭';
						case 5:
							return '无效订单';
						default:
							return '';
					}
				};
			},
		},
		filters: {
			dateformat(value) {
				return moment(value, "YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DD HH:mm")
			}
		},
		created() {
			if (this.order.union_status === 'pay_pending' && this.order.auto_closed_at) {
				this.close_at = moment(this.order.auto_closed_at)
				if (this.close_at < moment()) return

				this.closeTimeVisible = true
				this.setTime(this.close_at)

				this.timer = setInterval(() => {
					this.setTime(this.close_at)
				}, 1000)
			}
		},
		destroyed() {
			clearInterval(this.timer)
		},
		methods: {
			// 联系客服方法
			openContact() {
				window.location.href = 'https://work.weixin.qq.com/kfid/kfc4ef48258ae5ce0a4'
			},
			// UseMiniappKf(){
			// 	window.location.href = 'https://work.weixin.qq.com/kfid/kfc4ef48258ae5ce0a4'
			// },
			setTime(close_at) {
				let now = moment()
				this.hours = this.fillNumber(close_at.diff(now, 'hours'))
				this.minutes = this.fillNumber(close_at.diff(now, 'minutes') % 60)
				this.seconds = this.fillNumber(close_at.diff(now, 'seconds') % 60)
				if (close_at < now) {
					clearInterval(this.timer)
				}
			},
			fillNumber(num) {
				if (num < 10) {
					return '0' + num
				} else {
					return num
				}
			},
			handleClick() {
				console.log(222);
				if (this.isSelectMode) {
					this.$emit('check')
					return false
				}
				const uuid = this.order.uuid
				this.$http(`/zb-order/details/` + uuid, 'GET').then(res => {
					console.log(res);
					uni.navigateTo({
						url: '/pages/orderDetail/index?uuid=' + this.order.uuid
					})
				})
				// console.log("执行uni.navigateTo");

				// console.log("uni.navigateTo被执行");
			},
			handleClick2(e) {
				this.$emit('action', {
					order: this.order,
					action: e.currentTarget.dataset.type
				})
			},
			// handleCheck() {
			// 	this.$emit('check')
			// },
			handleCoverChip() {
				uni.navigateTo({
					url: '/pages/coverChip/index?sku_id=' + this.order.skus[0].sku_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.border-bottom-2 {
		border-bottom: 1px dashed #f1f1f1;
	}

	.bg-cancel,
	.bg-orange {
		color: #fff !important;
		background: url(../../../static/seach.png) center/ cover no-repeat !important;
	}

	.order-item {
		background: rgb(26, 23, 36);
		border: 3rpx solid #5d4748;
		margin: 30upx auto;
		padding: 30rpx;
		width: 90%;
		// box-shadow: 0px 6rpx 30rpx 0px rgba(226, 222, 204, 0.5);
		border-radius: 20rpx;

		// padding: 0rpx 24rpx 20rpx 24rpx;

		.order-item-header {
			height: 70upx;

			// padding: 0 24upx;
			// padding-left: 24rpx;
			background: #fff;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			font-size: 24upx;

			.time {
				font-size: 35rpx;
				font-weight: bold;
				line-height: 40rpx;
			}

			.type {
				font-size: 35rpx;
				font-weight: 100;
				color: #fff;
			}

			.status {
				// font-size: 24rpx;
				// height: 68rpx;
				height: 100%;
				padding: 0rpx 26rpx 0rpx 44rpx;
				// padding-right: 20rpx;
				line-height: 50rpx;
				// padding-left: 10rpx;
				box-sizing: border-box;

				background: url(../../../static/activity/status-bg-working.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position-x: right;
				color: white;

				&.working,
				&.pending {
					background: url(../../../static/activity/status-bg-working.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position-x: right;
					color: white;
				}

				&.completed,
				&.comment_pending {
					// background: url('@/static/dayTask/down.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position-x: right;
					color: white;
				}

				&.expired,
				&.closed,
				&.return_sale {
					color: rgba(153, 153, 153, 1);
					background: url(../../../static/activity/status-bg-expired.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position-x: right;
				}

				// .text {
				// 	width: 210rpx;
				// 	text-align: center;
				// 	display: block;
				// 	float: right;
				// 	line-height: 56rpx;
				// 	font-weight: 500;
				// }
			}
		}

		.total-price {
			/* padding: 10rpx 0upx; */
			/* display: flex;
		align-items: flex-start;
		justify-content: space-around; */

			.store-total {
				padding: 16rpx 0upx;
				display: flex;
				align-items: stretch;
				justify-content: space-around;

				/* justify-content: stretch; */
				.right {
					width: 60%;

					.remark {
						font-size: 26upx;
					}

					.price-product {
						display: flex;
						justify-content: space-between;
						margin-top: 10rpx;
						line-height: 56rpx;

						.price-number {
							display: flex;
							align-items: center;
							font-size: 24upx;
							
						}

						.price-number1 {
							color: #fff;
						}

						.price-key {
							background: #fff;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							font-weight: 500;
						}

						.price {
							margin-left: 8upx;
							font-weight: 500;
							font-size: 35rpx;
							color: #ed2346 !important;
							
						}
					}
				}




			}

			.price-number {
				display: flex;
				align-items: center;
				font-size: 24upx;
				line-height: 56rpx;
				// margin-top: 10rpx;
			}

			.price-key {
				background: #fff;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight: 500;
				line-height: 56rpx;
			}

			.price {
				margin-left: 8upx;
				font-weight: 500;
				font-size: 35rpx;
				background: linear-gradient(70deg, rgb(108, 67, 255), rgb(133, 94, 231));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				line-height: 56rpx;
				display: inline-block;
			}

		}

		.close-time {
			font-weight: 500;
			padding: 0 24upx;
			font-size: 26upx;
			text-align: right;
			margin-bottom: 10upx;
		}

		.bottom-actions {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;

			.check-box {
				flex-grow: 1;
				display: flex;
				align-content: center;


				text {
					font-size: 28rpx;
					margin-left: 2rpx;
				}
			}

			button {
				padding: 0;
				margin: 0;
				margin-left: 30upx;
				width: 150upx;
				height: 50upx;
				line-height: 50upx;
				font-size: 24upx;
				// border-radius: 1000px;
				position: relative;
				color: #fff;
				background: url(../../../static/seach.png) center/ cover no-repeat;

				&.bg-white {
					// box-shadow: 0 2upx 8upx #cfcfcf;
				}

				&:after {
					border: none;
				}
			}
		}
	}

	.productName {
		font-size: 35rpx;
		color: #fff;
	}

	.thumb {
		width: 120upx;
		height: 120upx;
		border-radius: 8rpx;
	}
</style>